---
title: メニュー項目
image: /images/user-guide/kanban-views/kanban.png
---

<Frame>
  <img src="/images/user-guide/kanban-views/kanban.png" alt="Header" />
</Frame>

メニューまたはナビゲーションリストで使用するために設計された汎用性の高いメニュー項目です。

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { IconAlertCircle } from "@tabler/icons-react";
import { MenuItem } from "twenty-ui/display";

export const MyComponent = () => {
  const handleMenuItemClick = (event) => {
    console.log("Menu item clicked!", event);
  };

  const handleButtonClick = (event) => {
    console.log("Icon button clicked!", event);
  };

  return (
    <MenuItem
      LeftIcon={IconBell}
      accent="default"
      text="Menu item text"
      iconButtons={[{ Icon: IconAlertCircle, onClick: handleButtonClick }]}
      isTooltipOpen={true}
      testId="menu-item-1"
      onClick={handleMenuItemClick}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| プロパティ         | タイプ         | 説明                                                                                             |
| ------------- | ----------- | ---------------------------------------------------------------------------------------------- |
| 左アイコン         | アイコンコンポーネント | メニュー項目のテキストの前に表示されるオプションの左アイコン                                                                 |
| アクセント         | string      | メニュー項目のアクセントカラーを指定します。 Options include: `default`, `danger`, and `placeholder` |
| テキスト          | string      | メニュー項目のテキスト内容                                                                                  |
| アイコンボタン       | array       | メニュー項目に関連する追加のアイコンボタンを表すオブジェクトの配列                                                              |
| ツールチップオープンフラグ | ブール型        | メニュー項目に関連するツールチップの表示状態を制御します                                                                   |
| testId        | string      | テスト目的のためのdata-testid属性                                                                         |
| onClick       | 機能          | メニュー項目がクリックされたときにトリガーされるコールバック関数                                                               |
| className     | string      | 追加のスタイリングのためのオプション名                                                                            |

</Tab>
</Tabs>

## バリエーション

メニュー項目コンポーネントの異なるバリエーションには以下が含まれます:

### コマンド

キーボードショートカットを示すためのメニュー内のコマンド形式のメニュー項目。

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { MenuItemCommand } from "twenty-ui/display";

export const MyComponent = () => {
  const handleCommandClick = () => {
    console.log("Command clicked!");
  };

  return (
    <MenuItemCommand
      LeftIcon={IconBell}
      text="First Option"
      firstHotKey="⌘"
      secondHotKey="1"
      isSelected={true}
      onClick={handleCommandClick}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| プロパティ        | タイプ         | 説明                               |
| ------------ | ----------- | -------------------------------- |
| 左アイコン        | アイコンコンポーネント | メニュー項目のテキストの前に表示されるオプションの左アイコン   |
| テキスト         | string      | メニュー項目のテキスト内容                    |
| firstHotKey  | string      | コマンドに関連する最初のキーボードショートカット         |
| secondHotKey | string      | コマンドに関連する2番目のキーボードショートカット        |
| isSelected   | ブール型        | メニュー項目が選択またはハイライトされているかどうかを示します  |
| onClick      | 機能          | メニュー項目がクリックされたときにトリガーされるコールバック関数 |
| className    | string      | 追加スタイル用のオプション名                   |

</Tab>
</Tabs>

### ドラッグ可能

メニューまたはリスト内で項目をドラッグし、アイコンボタンを通じて追加のアクションを実行するために設計されたドラッグ可能なメニュー項目コンポーネント。

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { IconAlertCircle } from "@tabler/icons-react";
import { MenuItemDraggable } from "twenty-ui/display";

export const MyComponent = () => {
  const handleMenuItemClick = (event) => {
    console.log("Menu item clicked!", event);
  };

  return (
    <MenuItemDraggable
      LeftIcon={IconBell}
      accent="default"
      iconButtons={[{ Icon: IconAlertCircle, onClick: handleButtonClick }]}
      isTooltipOpen={false}
      onClick={handleMenuItemClick}
      text="Menu item draggable"
      isDragDisabled={false}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| プロパティ          | タイプ         | 説明                                                                                                         |
| -------------- | ----------- | ---------------------------------------------------------------------------------------------------------- |
| 左アイコン          | アイコンコンポーネント | メニュー項目のテキストの前に表示されるオプションの左アイコン                                                                             |
| アクセント          | string      | メニュー項目のアクセントカラー。 `default`、`placeholder`、および `danger` のいずれかです `default`、`placeholder`、および `danger` のいずれかです |
| アイコンボタン        | array       | メニュー項目に関連する追加のアイコンボタンを表すオブジェクトの配列                                                                          |
| ツールチップオープンフラグ  | ブール型        | メニュー項目に関連するツールチップの表示状態を制御します                                                                               |
| onClick        | 機能          | リンクがクリックされるとトリガーされるコールバック関数                                                                                |
| テキスト           | string      | メニュー項目のテキスト内容                                                                                              |
| isDragDisabled | ブール型        | ドラッグが無効かどうかを示します                                                                                           |
| className      | string      | 追加スタイル用のオプション名                                                                                             |

</Tab>
</Tabs>

### マルチ選択

関連するチェックボックスを使用してマルチ選択機能を実装する方法を提供します。

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { MenuItemMultiSelect } from "twenty-ui/display";

export const MyComponent = () => {

  return (
    <MenuItemMultiSelect
      LeftIcon={IconBell}
      text="First Option"
      selected={false}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| プロパティ          | タイプ         | 説明                                  |
| -------------- | ----------- | ----------------------------------- |
| 左アイコン          | アイコンコンポーネント | メニュー項目のテキストの前に表示されるオプションの左アイコン      |
| テキスト           | string      | メニュー項目のテキスト内容                       |
| selected       | ブール型        | メニュー項目が選択されている（チェックされている）かどうかを示します  |
| onSelectChange | 機能          | チェックボックスの状態が変更されたときにトリガーされるコールバック関数 |
| className      | string      | 追加スタイル用のオプション名                      |

</Tab>
</Tabs>

### マルチ選択アバター

選択用のチェックボックスとテキストコンテンツを備えたアバター付きのマルチ選択メニュー項目。

<Tabs>
<Tab title="Usage">

```jsx
import { MenuItemMultiSelectAvatar } from "twenty-ui/display";

export const MyComponent = () => {
  const imageUrl =
    "";

  return (
    <MenuItemMultiSelectAvatar
      avatar={<img src={imageUrl} alt="Avatar" />}
      text="First Option"
      selected={false}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| プロパティ          | タイプ         | 説明                                  |
| -------------- | ----------- | ----------------------------------- |
| avatar         | `ReactNode` | メニュー項目の左側に表示されるアバターまたはアイコン          |
| テキスト           | string      | メニュー項目のテキスト内容                       |
| selected       | ブール型        | メニュー項目が選択されている（チェックされている）かどうかを示します  |
| onSelectChange | 機能          | チェックボックスの状態が変更されたときにトリガーされるコールバック関数 |
| className      | string      | 追加のスタイリングのためのオプション名                 |

</Tab>
</Tabs>

### ナビゲート

オプションの左アイコン、テキストコンテンツ、および右のチューロマークを特徴とするメニュー項目。

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { MenuItemNavigate } from "twenty-ui/display";

export const MyComponent = () => {
  const handleNavigation = () => {
    console.log("Navigate to another page");
  };

  return (
    <MenuItemNavigate
      LeftIcon={IconBell}
      text="First Option"
      onClick={handleNavigation}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| プロパティ     | タイプ         | 説明                               |
| --------- | ----------- | -------------------------------- |
| 左アイコン     | アイコンコンポーネント | メニュー項目のテキストの前に表示されるオプションの左アイコン   |
| テキスト      | string      | メニュー項目のテキスト内容                    |
| onClick   | 機能          | メニュー項目がクリックされたときにトリガーされるコールバック関数 |
| className | string      | 追加スタイル用のオプション名                   |

</Tab>
</Tabs>

### 選択

オプションの左コンテンツ（アイコンとテキスト）と選択状態のインジケーター（チェックアイコン）を備えた選択可能なメニュー項目。

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { MenuItemSelect } from "twenty-ui/display";

export const MyComponent = () => {
  const handleSelection = () => {
    console.log("Menu item selected");
  };

  return (
    <MenuItemSelect
      LeftIcon={IconBell}
      text="First Option"
      selected={true}
      disabled={false}
      hovered={false}
      onClick={handleSelection}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| プロパティ     | タイプ         | 説明                                 |
| --------- | ----------- | ---------------------------------- |
| 左アイコン     | アイコンコンポーネント | メニュー項目のテキストの前に表示されるオプションの左アイコン     |
| テキスト      | string      | メニュー項目のテキスト内容                      |
| 選択済み      | ブール型        | メニュー項目が選択されている（チェックされている）かどうかを示します |
| disabled  | ブール型        | メニュー項目が無効かどうかを示します                 |
| ホバー       | ブール型        | メニュー項目が現在ホバーされているかどうかを示します         |
| onClick   | 機能          | メニュー項目がクリックされたときにトリガーされるコールバック関数   |
| className | string      | 追加スタイル用のオプション名                     |

</Tab>
</Tabs>

### 選択アバター

アバター付きの選択可能なメニュー項目、オプションの左コンテンツ（アバターとテキスト）および選択状態のためのインジケーター（チェックアイコン）。

<Tabs>
<Tab title="Usage">

```jsx
import { MenuItemSelectAvatar } from "twenty-ui/display";

export const MyComponent = () => {
  const imageUrl =
    "";

  const handleSelection = () => {
    console.log("Menu item selected");
  };

  return (
    <MenuItemSelectAvatar
      avatar={<img src={imageUrl} alt="Avatar" />}
      text="First Option"
      selected={true}
      disabled={false}
      hovered={false}
      testId="menu-item-test"
      onClick={handleSelection}
      className
    />
  );
};

```

</Tab>
<Tab title="Props">

| プロパティ     | タイプ         | 説明                                 |
| --------- | ----------- | ---------------------------------- |
| avatar    | `ReactNode` | メニュー項目の左側に表示されるアバターまたはアイコン         |
| テキスト      | string      | メニュー項目のテキスト内容                      |
| selected  | ブール型        | メニュー項目が選択されている（チェックされている）かどうかを示します |
| disabled  | ブール型        | メニュー項目が無効かどうかを示します                 |
| ホバー       | ブール型        | メニュー項目が現在ホバーされているかどうかを示します         |
| testId    | string      | テスト目的のためのdata-testid属性             |
| onClick   | 機能          | メニュー項目がクリックされたときにトリガーされるコールバック関数   |
| className | string      | 追加のスタイリングのためのオプション名                |

</Tab>
</Tabs>

### 色を選択

ユーザーがメニューから色を選択できるシナリオに使用するための、カラーパレットサンプルを備えた選択可能なメニュー項目。

<Tabs>
<Tab title="Usage">

```jsx
import { MenuItemSelectColor } from "twenty-ui/display";

export const MyComponent = () => {
  const handleSelection = () => {
    console.log("Menu item selected");
  };

  return (
    <MenuItemSelectColor
      color="green"
      selected={true}
      disabled={false}
      hovered={true}
      variant="default"
      onClick={handleSelection}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| プロパティ     | タイプ    | 説明                                                                                                                                                                                                                 |
| --------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| カラー       | string | メニュー項目にサンプルとして表示されるテーマカラー。 選択肢には、`green`、`turquoise`、`sky`、`blue`、`purple`、`pink`、`red`、`orange`、`yellow`、`gray`があります。 選択肢には、`green`、`turquoise`、`sky`、`blue`、`purple`、`pink`、`red`、`orange`、`yellow`、`gray`があります。 |
| selected  | ブール型   | メニュー項目が選択されている（チェックされている）かどうかを示します                                                                                                                                                                                 |
| disabled  | ブール型   | メニュー項目が無効かどうかを示します                                                                                                                                                                                                 |
| ホバー       | ブール型   | メニュー項目が現在ホバーされているかどうかを示します                                                                                                                                                                                         |
| バリアント     | string | 色サンプルのバリアント。 色サンプルのバリアント。 `default` または `pipeline` のいずれかです。                                                                                                                                                        |
| onClick   | 機能     | メニュー項目がクリックされたときにトリガーされるコールバック関数                                                                                                                                                                                   |
| className | string | 追加スタイル用のオプション名                                                                                                                                                                                                     |

</Tab>
</Tabs>

### 切り替え

特定の機能を有効または無効にするためのトグルスイッチが付いたメニュー項目

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from '@tabler/icons-react';

import { MenuItemToggle } from 'twenty-ui/display';

export const MyComponent = () => {

  return (
    <MenuItemToggle
      LeftIcon={IconBell}
      text="First Option"
      toggled={true}
      toggleSize="small"
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| プロパティ          | タイプ         | 説明                                 |
| -------------- | ----------- | ---------------------------------- |
| 左アイコン          | アイコンコンポーネント | メニュー項目のテキストの前に表示されるオプションの左アイコン     |
| テキスト           | string      | メニュー項目のテキスト内容                      |
| toggled        | ブール型        | トグルスイッチが「オン」または「オフ」かを示します          |
| onToggleChange | 機能          | トグルスイッチの状態が変化した際にトリガーされるコールバック関数   |
| トグルサイズ         | string      | トグルスイッチのサイズです。 It can be either \ |
| className      | string      | 追加のスタイリングのためのオプション名                |

</Tab>
</Tabs>
